<template>
	<view id="wai">
		<image src="../../static/img/bj.jpg"></image>
		<span id="textOne">专业靠谱<br>生日管理小帮手</span>
		<view id="one">
			<view id="dangao" @click="add()">
				<view id="dangaoicon" class="iconfont icon-shengridangao"></view>
			</view>
			<view id="xin">
				<view id="xinicon" class="iconfont icon-xin"></view>
			</view>
			<span id="shengritext">生日</span>
			<span id="jinianritext">纪念日</span>
		</view>
		<view>
			<view id="jijiang" class="iconfont icon-shengridangao">
				<span id="guoshengri">即将过生日</span>
			</view>
			<view id="Two" v-for="(item,index) in arr" :key="index">
				<view class="touxiang"></view>
				<span>{{item.name}}</span>
				<span>{{item.countday}}</span>
				<span>{{item.Shengxiao+'/'+item.Nongli}}</span>
				<span>{{item.Xingzuo}}</span>
				<span>{{item.Guanxi}}</span>
				<span>{{item.gongli}}</span>
			</view>
			<view id="jinianri" class="iconfont icon-xin">
				<span>纪念日</span>
			</view>
			<view id="Four" v-for="(item,index) in jinianri" :key="index">
				<view class="touxiang"></view>
				<span>{{item.Beizhu}}</span>
				<span>{{item.name}}</span>
				<span>{{item.Nongli}}</span>
				<span>{{item.Day}}</span>
				<span>{{'天数:'+item.countday}}</span>
			</view>
			<view id="jieri" class="iconfont icon-rili">
				<span>节日</span>
			</view>
			<view id="Five" v-for="(item,index) in jieri" :key="index">
				<view class="touxiang"></view>
				<span>{{item.name}}</span>
				<span>{{'天数:'+item.countday}}</span>
				<span>{{item.Nongli}}</span>
				<span>{{item.Week}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '../../utils/api'
	export default {
		data() {
			return {
				title: '我的小程序',
				arr:[],
				jinianri:[],
				jieri:[]
			}
		},
		onLoad() {
			this.getAllBirthday();
			this.getAllJinianri();
			this.getAlljieri();
		},
		methods: {
			getAllBirthday(){
				uni.request({
					url:api.GET_ALL_BIRTHDAY,
					method:'get',
					data:'',
					success:(res)=>{
						this.arr = res.data.data;
						console.log(this.arr)
					}
				})
			},
			getAllJinianri(){
				uni.request({
					url:api.GET_ALL_JINIANRI,
					method:'get',
					data:'',
					success:(res) =>{
						this.jinianri = res.data.data;
						console.log(this.jinianri)
					}
				})
			},
			getAlljieri(){
				uni.request({
					url:api.GET_ALL_JIERI,
					method:'get',
					data:'',
					success:(res) =>{
						this.jieri = res.data.data;
						console.log(this.jieri)
					}
				})
			},
			add(){
				uni.navigateTo({
					url: '/pages/index/birthdayGuanli'
				})
			}
		}
	}
</script>

<style>
	#wai{
		background-color: #F4F4F4;
		height: 880px;
	}
	image{
		width: 395px;
		height: 166.5px;
	}
	#textOne{
		position: absolute;
		left: 118.5px;
		top: 55px;
		z-index: 2;
		color: #FFFFFF;
		font-size: 20px;
	}
	#one{
		width: 365px;
		height: 120px;
		background-color: #FFFFFF;
		position: relative;
		left: 15px;
		top: -25px;
		display: flex;
		justify-content:flex-start ;
		border-radius: 10px;
	}
	#dangao{
		width: 60px;
		height: 60px;
		background: linear-gradient(-45deg, #F48FB1 0%, #FEEABA 100%);
		box-shadow: 1px 3px 7px 0 rgba(244, 143, 177, 0.63);
		border-radius: 50%;
		position: relative;
		margin: 20px 0 0 20px;
	}
	#dangaoicon{
		color: #FFFFFF;
		position: absolute;
		top: 8px;
		left: 10px;
		font-size: 40px;
	}
	#xin{
		width: 60px;
		height: 60px;
		background: linear-gradient(-45deg, #F48FB1 0%, #FEEABA 100%);
		box-shadow: 1px 3px 7px 0 rgba(244, 143, 177, 0.63);
		border-radius: 50%;
		position: relative;
		margin: 20px 0 0 20px;
	}
	#xinicon{
		color: #FFFFFF;
		position: absolute;
		top: 14px;
		left: 10px;
		font-size: 34px;
	}
	#shengritext{
		position: absolute;
		bottom: 10px;
		left: 33px;
		color: #333333;
		font-size: 14px;
	}
	#jinianritext{
		position: absolute;
		bottom: 10px;
		left: 105px;
		color: #333333;
		font-size: 14px;
	}
	#jijiang{
		color:#F48FB1;
		margin-left: 15px;
		margin-top: -15px;
		font-size: 24px;
	}
	#guoshengri{
		color: #333333;
		margin-left: 5px;
		font-size: 16px;
	}
	#Two{
		width: 365px;
		height: 80px;
		background-color: #FFFFFF;
		margin-left: 15px;
		border-radius: 10px;
		margin-top: 10px;
		padding-top: 12px;
		position: relative;
	}
	.touxiang{
		width: 67px;
		height: 67px;
		background: #F48FB1;
		border-radius: 50%;
		margin-left:10px;
	}
	#Two>span:nth-of-type(1){
		position: absolute;
		left: 85px;
		top: 10px;
		font-weight: bold;
		font-size: 14px;
	}
	#Two>span:nth-of-type(2){
		position: absolute;
		right: 15px;
		top: 10px;
		font-weight: bold;
		font-size: 14px;
	}
	#Two>span:nth-of-type(3){
		position: absolute;
		left: 85px;
		top: 35px;
		font-size: 14px;
	}
	#Two>span:nth-of-type(4){
		position: absolute;
		right: 15px;
		top: 35px;
		font-size: 14px;
	}
	#Two>span:nth-of-type(5){
		position: absolute;
		left: 85px;
		top: 60px;
		font-size: 14px;
	}
	#Two>span:nth-of-type(6){
		position: absolute;
		right: 15px;
		top: 60px;
		font-size: 14px;
	}
	#jinianri{
		color:#F48FB1 ;
		margin-left: 15px;
		margin-top: 5px;
		font-size: 20px;
	}
	#jinianri>span{
		color: #333333;
		margin-left: 5px;
		font-size: 16px;
	}
	#Four{
		width: 365px;
		height: 80px;
		background-color: #FFFFFF;
		margin-left: 15px;
		border-radius: 10px;
		margin-top: 10px;
		padding-top: 12px;
		position: relative;
	}
	#Four>span:nth-of-type(1){
		position: absolute;
		left: 85px;
		top: 10px;
		font-weight: bold;
		font-size: 14px;
	}
	#Four>span:nth-of-type(2){
		position: absolute;
		right: 15px;
		top: 10px;
		font-weight: bold;
		font-size: 14px;
	}
	#Four>span:nth-of-type(3){
		position: absolute;
		left: 85px;
		top: 35px;
		font-size: 14px;
	}
	#Four>span:nth-of-type(4){
		position: absolute;
		right: 15px;
		top: 35px;
		font-size: 14px;
	}
	#Four>span:nth-of-type(5){
		position: absolute;
		left: 85px;
		top: 60px;
		font-size: 14px;
	}
	#jieri{
		color:#F48FB1 ;
		margin-left: 15px;
		font-size: 20px;
		margin-top: 5px;
	}
	#jieri>span{
		color: #333333;
		margin-left: 5px;
		font-size: 16px;
	}
	#Five{
		width: 365px;
		height: 80px;
		background-color: #FFFFFF;
		margin-left: 15px;
		border-radius: 10px;
		margin-top: 10px;
		padding-top: 12px;
		position: relative;
	}
	#Five>span:nth-of-type(1){
		position: absolute;
		left: 85px;
		top: 20px;
		font-weight: bold;
		font-size: 14px;
	}
	#Five>span:nth-of-type(2){
		position: absolute;
		right: 15px;
		top: 20px;
		font-weight: bold;
		font-size: 14px;
	}
	#Five>span:nth-of-type(3){
		position: absolute;
		left: 85px;
		top: 45px;
		font-size: 14px;
	}
	#Five>span:nth-of-type(4){
		position: absolute;
		right: 15px;
		top: 45px;
		font-size: 14px;
	}
</style>
